import './ModalTableHEdit.css'
import React, { useState } from 'react';
import { Modal, Button } from 'antd'
import {
    Form,
    Input,
    Radio,
    Select,
} from 'antd';
import http from '../../../../../utils/http';

const ModalTableHEdit = (props) => {
    console.log(props);
    // let health_id = props.content.health_id
    // console.log(props.content.bloodPressure);
    let s = props.content.bloodPressure || ""
    // console.log(s.split('/')[0]);
    const onChange = e => {
        console.log(e);
    };

    // 编辑
    const [isModalVisible2, setIsModalVisible2] = useState(false);

    const showModal2 = () => {
        setIsModalVisible2(true);
        // onFinish={onFinish}
        // onFinish()
    };

    let [bloodPressure0, setbloodPressure0] = useState()
    const editbloodPressure0 = e => {
        console.log(e.target.value);
        setbloodPressure0(e.target.value)
    };

    let [bloodPressure1, setbloodPressure1] = useState()
    const editbloodPressure1 = e => {
        console.log(e.target.value);
        setbloodPressure1(e.target.value)
    };

    let [heartRate, setheartRate] = useState()
    const editheartRate = e => {
        console.log( e.target.value);
        setheartRate(e.target.value)
    };
    let [bloodSugar, setbloodSugar] = useState()
    const editbloodSugar = e => {
        console.log(e.target.value);
        setbloodSugar(e.target.value)
    };
    let [bloodFat, setbloodFat] = useState()
    const editbloodFat = e => {
        console.log(e.target.value);
        setbloodFat(e.target.value)
    };
    let [bloodOxygen, setbloodOxygen] = useState()
    const editbloodOxygen = e => {
        console.log('分数', e.target.value);
        setbloodOxygen(e.target.value)
    };
    let [dietary, setdietary] = useState()
    const editdietary = e => {
        console.log('分数', e.target.value);
        setdietary(e.target.value)
    };

    const handleOk2 = () => {
        setIsModalVisible2(false);
        http({
            url: '/healthdata/edit',
            method: 'post',
            data: {
                health_id: props.content.health_id,
                heartRate: heartRate || props.content.heartRate,
                bloodSugar: bloodSugar || props.content.bloodSugar,
                bloodFat: bloodFat || props.content.bloodFat,
                bloodPressure0: bloodPressure0 || s.split('/')[0],
                bloodPressure1: bloodPressure1 || s.split('/')[1],
                bloodOxygen: bloodOxygen || props.content.bloodOxygen,
                dietary: dietary || props.content.dietary,
            }
        }).then((res) => {
            if (res) {
                props.fn();
            }
        })
    };

    const handleCancel2 = () => {
        setIsModalVisible2(false);
    };
    // 模态框title
    const CustomTitle2 = () => {
        return (
            <div className='CustomTitle_title'>
                编辑数据
            </div>
        )
    }
    return (
        <div>
            <a onClick={showModal2}>编辑数据</a>
            <Modal cancelText='取消' okText='确认' width="715px" title={<CustomTitle2></CustomTitle2>} visible={isModalVisible2} onOk={handleOk2} onCancel={handleCancel2}
                footer={[
                    <Button id="ModalseeS2Btn1" key="back" onClick={handleCancel2}>取消</Button>,
                    <Button id="ModalseeS2Btn2" key="submit" type="primary" onClick={handleOk2}>
                        确认
                    </Button>,]}>
                <div>
                    <Form className="ModalTableHEdit">
                        <div className="ModalTableHEdit_c1">
                            <p>心率(次):</p>
                            <div className="ModalTableHEdit_c1_c">
                                <Form.Item>
                                    <Input placeholder="请输入数据名称" onChange={editheartRate} defaultValue={props.content.heartRate} />
                                </Form.Item>
                            </div>
                            <p>血糖(mmol):</p>
                            <div className="ModalTableHEdit_c1_c">
                                <Form.Item>
                                    <Input placeholder="请输入数据名称" onChange={editbloodSugar} defaultValue={props.content.bloodSugar} />
                                </Form.Item>
                            </div>
                            <p>血脂(mmol)：</p>
                            <div className="ModalTableHEdit_c1_c">
                                <Form.Item>
                                    <Input placeholder="请输入数据名称" onChange={editbloodFat} defaultValue={props.content.bloodFat} />
                                </Form.Item>
                            </div>
                        </div>
                        <div className="ModalTableHEdit_c2">
                            <p>血压(mmHg):</p>
                            <div className="ModalTableHEdit_c2_c1">
                                <Form.Item className="ModalTableHEdit_c2_c1_c">
                                    <Input onChange={editbloodPressure0} placeholder="请输入数值1" defaultValue={s.split('/')[0]} />
                                    <span>/</span>
                                    <Input placeholder="请输入数值2" onChange={editbloodPressure1} defaultValue={s.split('/')[1]} />
                                </Form.Item>
                            </div>
                            <p>血氧(%):</p>
                            <div className="ModalTableHEdit_c2_c">
                                <Form.Item>
                                    <Input placeholder="请输入数据名称" onChange={editbloodOxygen} defaultValue={props.content.bloodOxygen} />
                                </Form.Item>
                            </div>
                            <p>膳食(cal)：</p>
                            <div>
                                <Form.Item>
                                    <Input placeholder="请输入数据名称" onChange={editdietary} defaultValue={props.content.dietary} />
                                </Form.Item>
                            </div>
                        </div>
                    </Form>
                </div>
            </Modal>
        </div>
    )

}
export default ModalTableHEdit